<template>
  <n-modal v-model:show="showRef" class="go-create-modal" @afterLeave="closeHandle">
    <n-space size="large">
      <n-card class="card-box" hoverable>
        <template #header>
          <n-text class="card-box-tite">{{ cardData?.id ? '修改' : '创建' }}{{ typeName }}</n-text>
        </template>
        <template #header-extra>
          <n-text @click="closeHandle">
            <n-icon size="20">
              <component :is="CloseIcon"></component>
            </n-icon>
          </n-text>
        </template>
        <n-space class="card-box-content" justify="center">
          <n-form
            ref="formRef"
            label-placement="left"
            :label-width="100"
            style="width: 400px"
            :model="formValue"
            :rules="rules"
          >
            <n-form-item :label="typeName + '名称'" path="content.name">
              <n-input v-model:value="formValue.content.name" placeholder="请输入" />
            </n-form-item>
            <n-form-item :label="typeName + '描述'" path="content.desc">
              <n-input v-model:value="formValue.content.desc" placeholder="请输入" />
            </n-form-item>
            <n-form-item label="排序" path="content.desc">
              <n-input-number v-model:value="formValue.content.seq" style="width: 100%" :min="0" :step="1" />
            </n-form-item>
            <template v-if="typeName === '页面'">
              <n-form-item label="在菜单栏展示" path="content.in_menu">
                <n-radio-group v-model:value="formValue.content.in_menu" name="radiogroup">
                  <n-space>
                    <n-radio :value="1">是</n-radio>
                    <n-radio :value="0">否</n-radio>
                  </n-space>
                </n-radio-group>
              </n-form-item>
              <n-form-item label="菜单路径" path="content.desc">
                <n-input v-model:value="formValue.content.menu_path" placeholder="一级菜单/二级菜单/三级菜单/...">
                </n-input>
              </n-form-item>
            </template>

            <div style="text-align: right">
              <n-button type="primary" attr-type="button" :loading="loading" @click="handleValidateClick">
                提交
              </n-button>
            </div>
          </n-form>
        </n-space>
      </n-card>
    </n-space>
  </n-modal>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { icon } from '@/plugins'
const { CloseIcon } = icon.ionicons5
const showRef = ref(false)

const emit = defineEmits(['close', 'submit'])
const props = defineProps({
  show: Boolean,
  typeName: String,
  cardData: Object,
  loading: Boolean
})

const rules = ref({
  content: {
    name: {
      required: true,
      message: '请输入名称',
      trigger: ['input']
    }
  }
})

const formValue = ref<any>({
  content: {}
})
const formRef = ref<any>({})

watch(props, newValue => {
  showRef.value = newValue.show
  if (newValue.cardData && Object.keys(newValue.cardData).length) {
    formValue.value = newValue.cardData
  } else {
    formValue.value = {
      content: {
        in_menu: 1
      }
    }
  }
})

// 关闭对话框
const closeHandle = () => {
  emit('close', false)
}

// 提交验证
const handleValidateClick = (e: MouseEvent) => {
  e.preventDefault()
  formRef.value?.validate((errors: any) => {
    if (!errors) {
      // success
      emit('submit', formValue.value)
    }
  })
}
</script>
<style lang="scss" scoped>
$cardWidth: 570px;

@include go('create-modal') {
  position: fixed;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  .card-box {
    width: $cardWidth;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0);
    @extend .go-transition;
    &:hover {
      @include hover-border-color('hover-border-color');
    }
    &-tite {
      font-size: 14px;
    }
    &-content {
      padding: 0px 10px;
      width: 100%;
    }
  }
}
</style>
